<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Practice</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />

</head>
<body>



	<div id="main">
		<div id="head">
			<span id="button"><a href="javascript:;">Refresh</a></span>
			<span id="check"><input type="checkbox" id="checkbox" /><label for="checkbox">auto refresh</label></span>
		</div>
		<div id="body">
			<table id="table">
				<thead>
					<tr>
						<th>Ticker</th>
						<th>LastPrice</th>
						<th>Chg</th>
						<th>Chg%</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="ticker">S&P 500</td>
						<td class="align"></td>
						<td class="align"></td>
						<td class="align"></td>
					</tr>
					<tr class="toggle">
						<td colspan="4"><img src="img/ticker.png"/></td>
					</tr>
					<tr>
						<td class="ticker">Oil</td>
						<td class="align"></td>
						<td class="align"></td>
						<td class="align"></td>
					</tr>
					<tr class="toggle">
						<td colspan="4"><img src="img/ticker.png"/></td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td class="ticker">Gold</td>
						<td class="align"></td>
						<td class="align"></td>
						<td class="align"></td>
					</tr>
				</tfoot>
			</table>
		</div>
		
	</div>
</body>
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.json.min.js"></script>
	<script type="text/javascript" src="js/practice.js"></script>
	<script type="text/javascript">

	$(document).ready(function(){
		sendHttpRequest();
		
		//set event
		$("a").bind("click",function(){sendHttpRequest()});
		$("#checkbox").bind("click",function(){onCheckboxClick()});
		$("#table").bind("click",function(event){togglePic(event)});
		
	})
</script>
</html>
